<template>
    <div class="StashECharts">
        <div class="but"> <a-button @click="back">返回</a-button></div>
        <div v-if="Flag" class="MaxBox">
            您所查询的仓库id不存在
        </div>
        <div v-else class="Content">
            <div class="Header">
                <span>{{ Title }}信息详情</span>

            </div>
            <div class="Doty">

                <div class="DotyBox">
                    <div ref="Echarts1" class="Echarts1">该仓库为暂未存放货物</div>
                </div>
                <div class="DotyBox">
                    <div ref="Echarts2" class="Echarts2">
                        该仓库为暂未存放货物
                    </div>
                </div>
                <div class="DotyBox">
                    <div ref="Echarts3" class="Echarts3">
                        该仓库为暂未存放货物
                    </div>
                </div>
                <div class="DotyBox">
                    <a-date-picker v-model:value="times" picker="month" :locale='locale' @change="ChangeTime"
                        :format="dateFormat" :allowClear="false" />
                    <div ref="Echarts4" class="Echarts4"> 该仓库为暂未存放货物</div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import img from "../../assets/jpg/背景.jpg"
import * as echarts from "echarts";
import { ref, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { area } from "../../utils/unit"
import { YearMonth } from "../../utils/Time"
import 'dayjs/locale/zh-cn';
import dayjs from 'dayjs';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import { YearM } from "../../utils/Time";
import { StashId, StashNumberFnProductAll, StashNumberFnProductClassAll, StorageSelectTime } from "../../Axios/General"
const route = useRoute()
const router = useRouter()
const Flag = ref(true)
const Title = ref("")
const Total = ref()
const surplus = ref()
const Echarts1 = ref()
const Echarts2 = ref()
const Echarts3 = ref()
const Echarts4 = ref()
const Echarts2List = ref()
const Echarts3List = ref()
const Echarts4List = ref()
const dateFormat = "YYYY-MM"
const times = ref()
const back = () => {
    router.push({
        name: "/"
    })
}
onMounted(async () => {
    await init()
    await init2()
    await init3()
    await init4()
    EchartsOne()
    Echartstwo()
    EchartsThree()
    Echartsfour()
    // window.onresize = async () => {
    //     await init()
    //     await init2()

    //     EchartsOne()
    //     Echartstwo()


    // }
})

const init = async () => {
    if (route.query.id) {
        const res = await StashId({ stashId: route.query.id })

        Title.value = ""
        Total.value = ""
        surplus.value = ""

        console.log(res);

        if (res.code == 200) {


            Title.value = res.data.stashName
            Total.value = res.data.stashTotalCapacity
            surplus.value = res.data.stashCapacity
            Flag.value = false


        } else {


            Flag.value = true

        }


    } else {
        Flag.value = true
    }
}
const init2 = async () => {
    if (route.query.id) {
        const res = await StashNumberFnProductAll({ stashId: route.query.id })
        Echarts2List.value = []
        if (res.code == 200) {
            Echarts2List.value = res.data


        }


    } else {
        Flag.value = true
    }
}
const init3 = async () => {
    if (route.query.id) {
        const res = await StashNumberFnProductClassAll({ stashId: route.query.id })
        Echarts3List.value = []

        if (res.code == 200) {
            Echarts3List.value = res.data


        }


    } else {
        Flag.value = true
    }
}
const init4 = async () => {
    if (route.query.id) {
        // let D = new Date().getFullYear() + "-" + (new Date().getMonth() + 1)
        Echarts4List.value = []

        if (!times.value) {

            times.value = dayjs(YearM(new Date()), dateFormat)
        }

        const res = await StorageSelectTime({ storageTime: new Date(YearM(times.value.format())), storageStashId: route.query.id })

        if (res.code == 200) {
            Echarts4List.value = res.data

        }


    } else {
        Flag.value = true
    }
}

const EchartsOne = () => {
    let Echarts: any;
    // Echarts = "";
    if (Total.value) {
        Echarts = echarts.init(Echarts1.value)

        Echarts.setOption({
            title: {
                text: "仓库容量",
                textStyle: {
                    color: "aqua"
                },
                left: "center",
                // top: "-20px"
            },
            legend: {
                left: "left",
                orient: 'vertical',
                textStyle: {
                    color: "aqua"
                },
            },
            tooltip: {},

            series: [{
                // name: "你哈",
                type: "pie",
                // radius: "50%",
                data: [{ value: surplus.value, name: "仓库剩余容量" }, { value: Total.value - surplus.value, name: "仓库使用容量" }]
            }]
        })
    }





}
const Echartstwo = () => {
    if (Echarts2List.value.length > 0) {
        let one: String[] = []
        let two = [{ value: 10, vol: "你好" }]
        Echarts2List.value.forEach((el) => {
            if (el.number != 0) {
                one.push(el.productName)
                two.push({
                    value: el.number,
                    vol: area(el.productSpecification),
                })
            }

        });
        two.shift()
        if (one.length > 0) {


            const Echarts = echarts.init(Echarts2.value)
            Echarts.setOption({
                title: {
                    text: "仓库货物明细",
                    textStyle: {
                        color: "aqua"
                    },
                    left: "center",
                    // top: "-20px"
                },
                // legend: {
                //     left: "left",
                //     orient: 'vertical',
                //     textStyle: {
                //         color: "aqua"
                //     },
                // },
                tooltip: {
                    formatter(params) {
                        // 返回值就是html代码可以使用标签
                        let res = ""


                        res += '<p>' + '规格：' + params.data.vol + '</p>'

                        return res;

                    },
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }

                },
                xAxis: {
                    data: one
                },
                yAxis: {
                    type: "value"
                },

                series: [{
                    // name: "你哈",
                    type: "bar",
                    // radius: "50%",
                    data: two,

                }]
            })



        }



    }


}
const EchartsThree = () => {
    if (Echarts3List.value.length > 0) {
        let one: any = []
        let three: any = []
        const two = Echarts3List.value.map(el => el.classificationName).reduce((top, num) => {
            if (num in top) {
                top[num]++
            } else {
                top[num] = 1
            }
            return top
        }, {})

        for (const key in two) {
            one.push({
                value: two[key],
                name: key
            })
            three.push(key)
        }




        const Echarts = echarts.init(Echarts3.value)
        Echarts.setOption({
            title: {
                text: "仓库存储商品分类明细",
                textStyle: {
                    color: "aqua"
                },
                left: "center",
                // top: "-20px"
            },
            // legend: {
            //     left: "left",
            //     orient: 'vertical',
            //     textStyle: {
            //         color: "aqua"
            //     },
            // },
            tooltip: {
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     let res = ""


                //     res += '<p>' + '规格：' + `${params.value}` + '</p>'

                //     return res;

                // },
                // axisPointer: { // 坐标轴指示器，坐标轴触发有效
                //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                // }

            },
            xAxis: {
                data: three
            },
            yAxis: {
                type: "value"
            },

            series: [{
                // name: "你哈",
                type: "line",
                // radius: "50%",
                data: one,

            }]
        })





    }


}
const Echartsfour = () => {
    let one: any = []
    let Two: any = []
    let Three: any = []
    if (Echarts4List.value.length > 0) {


        let str: string = ""
        Echarts4List.value.forEach(el => {
            el.storageTime = YearMonth(el.storageTime)
            if (!str.includes(el.storageTime)) {
                str += el.storageTime + ","
                one.push(el.storageTime)
            }

        });
        let arr = Echarts4List.value.filter(el => { return el.storageState === 2 }).reduce((top, num) => {


            if (num.storageTime in top) {
                top[num.storageTime]++
            } else {
                top[num.storageTime] = 1
            }
            return top
        }, {})
        let arr1 = Echarts4List.value.filter(el => { return el.storageState === 1 }).reduce((top, num) => {
            if (num.storageTime in top) {
                top[num.storageTime]++
            } else {
                top[num.storageTime] = 1
            }
            return top
        }, {})
        for (const key in arr) {
            Two.push({
                name: key,
                value: arr[key]
            })
        }
        for (const key in arr1) {
            Three.push({
                name: key,
                value: arr1[key]
            })
        }


        // let one: any = []
        // let Two: any = []
        // let Three: any = []
        // for (let index = 1; index <= 31; index++) {
        //     one.push(index)
        // }
        const Echarts = echarts.init(Echarts4.value)
        Echarts.setOption({
            title: {
                text: "仓库每月出库/入库数量",
                textStyle: {
                    color: "aqua"
                },
                left: "center",
                // top: "-20px"
            },
            legend: {
                left: "left",
                orient: 'vertical'
            },
            tooltip: {
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     let res = ""


                //     res += '<p>' + '规格：' + `${params.value}` + '</p>'

                //     return res;

                // },
                // axisPointer: { // 坐标轴指示器，坐标轴触发有效
                //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                // }

            },
            xAxis: {
                // type: "category",
                data: one

            },
            yAxis: {
                type: "category",
                // data: one
            },

            series: [{
                name: "入库情况",
                type: "line",
                // radius: "50%",
                data: Three,

            }, {
                name: "出库情况",
                type: "line",
                // radius: "50%",
                data: Two,

            }]
        })

    } else {
        let Echarts = echarts.getInstanceByDom(Echarts4.value)
        // console.log(one);
        if (one) {
            Echarts?.dispose()
        }

        Echarts = echarts.init(Echarts4.value)
        Echarts.setOption({
            title: {
                text: "仓库每月出库/入库数量",
                textStyle: {
                    color: "aqua"
                },
                left: "center",
                // top: "-20px"
            },
            legend: {
                left: "left",
                orient: 'vertical'
            },
            tooltip: {
                // formatter(params) {
                //     // 返回值就是html代码可以使用标签
                //     let res = ""


                //     res += '<p>' + '规格：' + `${params.value}` + '</p>'

                //     return res;

                // },
                // axisPointer: { // 坐标轴指示器，坐标轴触发有效
                //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                // }

            },
            xAxis: {
                // type: "category",
                data: one

            },
            yAxis: {
                type: "category",
                // data: one
            },

            series: [{
                name: "入库情况",
                type: "line",
                // radius: "50%",
                data: Three,

            }, {
                name: "出库情况",
                type: "line",
                // radius: "50%",
                data: Two,

            }]
        })
    }







}
const ChangeTime = async () => {
    await init4()

    Echartsfour()
}
</script>

<style scoped lang="scss">
$bg-img: "../../assets/jpg/背景.jpg";

.StashECharts {
    height: 100%;
    width: 100%;
    padding-bottom: 100px;

    .but {
        position: absolute;
        top: 20px;
        left: 20px
    }

    /*    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url($bg-img) no-repeat 100% cover;*/

    .MaxBox {
        color: red;
        opacity: 1;
        font-size: 40px;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .Content {
        color: aqua;

        height: 100%;
        width: 100%;
        padding: 20px;

        .Header {
            padding-top: 8px;
            width: 100%;
            text-align: center;
            font-size: 30px;
            letter-spacing: 6px;
            margin-bottom: 10px;
        }

        .Doty {
            display: grid;
            width: 100%;
            height: 100%;
            grid-template-columns: repeat(3, 33.3%);
            grid-template-rows: repeat(2, 50%);

            .DotyBox {
                width: 100%;
                height: 100%;

                .Echarts1 {
                    font-size: 30px;
                    width: 100%;
                    height: 100%;

                }

                .Echarts2 {
                    font-size: 30px;
                    width: 100%;
                    height: 100%;

                }

                .Echarts3 {
                    font-size: 30px;
                    width: 100%;
                    height: 100%;
                }

                .Echarts4 {
                    font-size: 30px;
                    width: 100%;
                    height: 100%;



                }
            }

            :nth-child(2) {
                grid-row-start: 1;
                grid-row-end: 2;
                grid-column-start: 2;
                grid-column-end: 4;
            }

            :nth-child(3) {
                grid-row-start: 2;
                grid-row-end: 2;
                grid-column-start: 1;
                grid-column-end: 3;
            }



        }
    }
}
</style>